import React,{useEffect,useState} from 'react'
import styles from '../css分支/Status.module.css'
import { Arrow, ChatO, Circle } from '@react-vant/icons';
import { Grid, Image } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import {  ArrowLeft } from '@react-vant/icons';
import axios from 'axios';
export default function Status() {
    const [list, setlist] = useState({})
    const getList = async () => {
        let res = await axios.get('http://localhost:3000/xzx/business')
        setlist(res.data.data)
    }
    const handTing=async()=>{
        let res = await axios.post('http://localhost:3000/xzx/unstatus')
        if(res.data.code==200){
            getList()
        }
    }   
    const handHuifu=async()=>{
        let res = await axios.post('http://localhost:3000/xzx/status')
        if(res.data.code==200){
            getList()
        }
    }   
    useEffect(() => {
        getList()
    }, [])
    const navigate =  useNavigate()
    return (
        <div>
            <div className={styles.head}>
                <ArrowLeft style={{ marginLeft: '0.2rem' }} onClick={() => { navigate('/shou/main') }} />
                <p style={{ fontSize: '0.22rem' }}>营业状态</p>
                <p style={{ marginRight: '0.1rem' }}></p>
            </div>
            {list.status?<div className={styles.body}>
                <img src="/imgs/status.png" alt="" style={{width:'3.3rem'}}/><br />
                <br />
                <p>当前店铺属于营业时间内，正常接受新订单&nbsp;&nbsp;</p>
                <div className={styles.button} onClick={()=>handTing()}>
                    <p style={{color:'white'}}>停止营业</p>
                </div>
                <p style={{fontSize:'0.13rem',width:'3.3rem',marginLeft:'0.36rem',color:'rgb(159, 159, 159)',marginTop:'0.25rem'}}>当您希望长时间不再接受订单时，请点击上方停止营业，开启后需手动恢复。</p>
            </div>
            :<div className={styles.body}>
                <img src="/imgs/unstatus.png" alt="" style={{width:'3.3rem'}}/><br />
                <br />
                <p>当前店铺已停止提供服务，不接受任何订单，手动恢复营业后可正常接受新订单&nbsp;&nbsp;</p>
                <div className={styles.button}>
                    <p style={{color:'white'}} onClick={()=>handHuifu()}>恢复营业</p>
                </div>
                <p style={{fontSize:'0.13rem',width:'3.3rem',marginLeft:'0.36rem',color:'rgb(159, 159, 159)',marginTop:'0.25rem'}}>当您希望接受新订单时，请点击上方按钮恢复营业</p>
            </div>}
            <div className={styles.foot}>
                <p style={{color:'rgb(245, 112, 88)'}}>外卖营业时间段:11:00-14:00,17:00-20.00</p>
            </div>
        </div>
    )
}
